<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../demo/css/elites.css">
    <link rel="stylesheet" href="../demo/css/mina.css">
</head>
<!-- 容器 -->
<div class="container">
    <!-- 页头 -->
    <div class="header">
        <!-- 导航栏 -->
        <div class="nav">
            <div class="nav-loge">
                <a href="" class="loge-a">
                    <img src="../demo/imgs/蓝狐.png" alt="">
                </a>
                <span>蓝狐教育</span>

            </div>
            <div class="nav-right">
                <ul>
                    <li> <a href="../demo/index.html">首页</a></li>
                    <li> <a href="../demo/elites.html">精品课程</a>
                        <div class="pull-down">
                            <a href="../demo/elites.html">前端工程</a>
                            <a href="../demo/rubbish-uI.html">uI垃圾</a>
                        </div>
                    </li>
                    <li> <a href="../demo/employment-service.html">就业服务</a></li>
                    <li> <a href="../demo/news.html">新闻动态</a></li>
                    <li> <a href="../demo/about.html">关于我们</a></li>
            </div>
        </div>
    </div>
    <div class="content-one">
        <img src="../demo/imgs/精品课程/前端工程师.png" alt="">
    </div>
    <div class="content-two">
        <p>0基础学IT，优选前端工程师</p>
        <p>已有 <span>10000+</span> 人选择在蓝狐学前端</p>
    </div>
    <div class="content-three">
        <ul>
            <li>
                <div class="content-three-top">
                    <p>就业方向广</p>
                    <p>需求广泛,多领域</p>
                    <p>多岗位都可就业</p>
                </div>
                <div class="content-three-btn">
                    <p>前端工程师</p>
                    <p>Web全栈工程师</p>
                    <p>H5/小程序开发工程师</p>
                    <p>Node.js工程师</p>
                </div>

            </li>
            <li>
                <div class="content-three-top">
                    <p>就业方向广</p>
                    <p>需求广泛,多领域</p>
                    <p>多岗位都可就业</p>
                </div>
                <div class="content-three-btn">
                    <p>前端工程师</p>
                    <p>Web全栈工程师</p>
                    <p>H5/小程序开发工程师</p>
                    <p>Node.js工程师</p>
                </div>
            </li>
            <li>
                <div class="content-three-top">
                    <p>就业方向广</p>
                    <p>需求广泛,多领域</p>
                    <p>多岗位都可就业</p>
                </div>
                <div class="content-three-btn">
                    <p>前端工程师</p>
                    <p>Web全栈工程师</p>
                    <p>H5/小程序开发工程师</p>
                    <p>Node.js工程师</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="content-four">
        <div class="content-five">
            <p>紧跟市场需求，让你成为更具竞争力的前端人才！</p>
            <p>真正为0基础学员而设，让你“学的都有用，学了都能懂”，提高效率、不走弯路</p>

            <ul>
                <li>
                    <p>紧跟企业需求</p>
                    <p>"就好业"的人才</p>
                    <p>培养体系</p>
                </li>
                <li>
                    <p>知识系统全面
                    </p>
                    <p> 打造全栈能力的</p>
                    <p> 知识体系</p>
                </li>
                <li>
                    <p>学习曲线平滑
                    </p>
                    <p>更适合小白的</p>
                    <p> 学习方案</p>
                </li>
                <li>
                    <p>
                        丰富练习/测试
                    </p>
                    <p>多种学习方式</p>
                    <p>让学习更有效</p>
                </li>
            </ul>
        </div>
        <div class="content-six">
            <img src="../demo/imgs/精品课程/电脑图.png" alt="">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="content-seven">
            <p>4大阶段，7个步骤，从0到全栈，让前端不止于前端</p>
            <p>企业对前端开发者的要求越来越高，掌握前后端的技术是面试中的重大加分项</p>

            <div class="content-seven-img"></div>
        </div>
    </div>
    <div class="content-eight">
        <p>多样化案例驱动式教学，让学习的每个环节都充满动力与成就感</p>
        <p>新手学代码最怕枯燥，沉浸式学习体验，在探索中掌握丰富的技术能力</p>
    </div>
    <div class="content-nine">
        <div class="content-nine-cot">
            <div class="content-nine-left">
                <ul>
                    <li>
                        <div style="background:rgb(255,123,0); ">基础技能</div>
                        <div style="background:rgb(255,123,0); color: aliceblue;">HTML5/CSS3</div>
                    </li>
                    <li>
                        <div>基础技能</div>
                        <div>JavaScript</div>
                    </li>
                    <li>
                        <div>技术提升</div>
                        <div>组件化</div>
                    </li>
                    <li>
                        <div>技术提升</div>
                        <div>
                            移动WebApp</div>
                    </li>
                    <li>
                        <div>技术拓展</div>
                        <div>小程序</div>
                    </li>
                    <li>
                        <div>技术纵深</div>
                        <div>Vue3.x</div>
                    </li>
                    <li>
                        <div>技术纵深</div>
                        <div>Node.js/ Koa2</div>
                    </li>
                    <li>
                        <div>技术拔高</div>
                        <div>
                            TypeScript/React.js</div>
                    </li>

                </ul>
            </div>
            <div class="content-nine-right">
                <img src="../demo/imgs/精品课程/小慕医生.png" alt="">
            </div>
        </div>
    </div>
    <div class="contern-eleven">
        <p>资深讲师讲解的面试题，技术面试+就业指导</p>
        <p>高强度扫盲！带你整理、总结所学，化解求职疑虑</p>
        <div class="contern-eleven-bck">
            <div class="contern-eleven-top">
                <div class="contern-eleven-top1">
                    <span>前端面试高频知识梳理</span><br>
                    <span>带你把知识串成线，连成面，印在脑中</span>
                </div>
                <div class="contern-eleven-top1">
                    <span>高效的面试技巧传授</span><br>
                    <span>带你理清“什么是必会题，什么是加分题”</span>
                </div>

            </div>
            <div class="contern-eleven-btm">
                <div class="contern-eleven-btm1">
                    <div class="contern-eleven-top1">
                        <span>独家解题方法论揭秘</span><br>
                        <span>让你实现“会1道题就能解决一类题”</span>
                    </div>
                    <div class="contern-eleven-top1">
                        <span>大厂面试+就业全流程指导</span><br>
                        <span>带你掌握面试流程、简历制作及求职方法论</span>

                    </div>
                </div>


            </div>
        </div>
    </div>
    <div class="content-twelve">
        <p class="content-twelve-p">蓝狐教育给你更好的学习，更好的未来</p>

        <div class="content-twelve-cot">
            <ul>
                <li id="content-twelve-cot"></li>
                <li>
                    <p>前端高级班</p>
                    <p>（6-7个月）</p>
                </li>
                <li>
                    <p>前端页面基础</p>
                    <p>HTML5基础、CSS3基础、切图 、精灵图、HTML5进阶、 CSS3进阶、less、sass、Bootstrap、响应式、移动端布局</p>
                </li>
                <li>
                    <p>前端交互设计</p>
                    <p>JavaScript基础、webAPI编程、JavaScript高级、面向对象编程、jQuery基础、jQuery进阶、jQuery高级</p>
                </li>
                <li>
                    <p>服务器端开发</p>
                    <p>ECMAScript6、Nodejs开发、Express框架、Koa2、 Promise与异步、Git/GitEE、MySQL数据库、ajax、websocket、服务端渲染、MVC、MVP</p>
                </li>
                <li>
                    <p>前端框架</p>
                    <p>vue基础、vue进阶、React、Typescript、ElementUI、 VantUI、Vue-cli、Vuex、vue-router、MVVM 原理、电商后台管理系统项目、移动端项目、组件开发、JSX、Antd</p>
                </li>
                <li>
                    <p>小程序+数据可视化</p>
                    <p>微信小程序开发、小程序发布流程、WXS、微信支付、uni-app、数据可视化</p>
                </li>
                <li>
                    <p>就业指导</p>
                    <p>职业素养、作品集整理、面试指导、职后指导</p>
                </li>
                <li></li>
            </ul>
            <ul>
                <li>
                    <p>前端中级班</p>
                    <p>（4-5个月）</p>
                </li>
                <li>
                    <p>前端页面基础</p>
                    <p>HTML5基础、CSS3基础、切图 、精灵图、HTML5进阶、 CSS3进阶、less、sass、Bootstrap、响应式、移动端布局</p>
                </li>
                <li>
                    <p>前端交互设计</p>
                    <p>JavaScript基础、webAPI编程、JavaScript高级、面向对象编程、jQuery基础、jQuery进阶、jQuery高级</p>
                </li>
                <li>
                    <p>前端框架</p>
                    <p>vue基础、vue进阶、React、Typescript、ElementUI、 VantUI、Vue-cli、Vuex、vue-router、MVVM 原理、电商后台管理系统项目、移动端项目、组件开发、JSX、Antd</p>
                </li>
                <li></li>
                <li></li>
                <li>
                    <p>就业指导</p>
                    <p>职业素养、作品集整理、面试指导、职后指导</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="teacher-content">

        <p style="font-size: 32px;">优秀讲师团队</p>
        <p>优秀的讲师团队是蓝狐教育取得成功的基础</p>
        <ul>
            <li>
                <img src="../demo/imgs/教师1.png" alt="">
                <div>

                    <p>段老师<span>★★★★★</span></p>
                    7年互联网设计经验，精通多款设计软件，资深UI设计师，拥有多年互联网UI视觉设计及管理经验，擅长2B/2C领域，熟悉并精通互联网产品/设计工作和运营工作中的各个环节和流程。
                </div>
            </li>
            <li>
                <img src="../demo/imgs/教师2.png" alt="">
                <div>
                    <p>李老师<span>★★★★★</span></p>
                    原互联网、物联网行业设计师；百度认证的U2高级讲师；14年设计总监经验，拥有一套独特的从0到1快速进阶的教学方法论！
                </div>
            </li>
            <li>
                <img src="../demo/imgs/教师3.png" alt="">
                <div>
                    <p>裵老师<span>★★★★★</span></p>
                    拥有6年的UI设计经验，3年的UI设计线上线下教学经验;曾在某知名互联网自营电商公司担任海外站项目设计总监，荣获Adobe Certified Associate国际认证考试监考员聘书;精通PS、AI、C4D、Axure等多款软件，擅长视觉营销设计、平面广告设计、UI交互动效设计等。
                </div>
            </li>
            <li>
                <img src="../demo/imgs/教师4.png" alt="">
                <div>
                    <p>杨老师<span>★★★★★</span></p>
                    拥有多年web前端开发相关工作经验，熟悉前端项目的整个开发流程，曾参加过多个大型上线项目的需求定制与研发工作。对PC端移动端应用、用户体验、交互设计有深入的研究。精通web开发技术HTML5、CSS3原生Javascript，
                </div>
            </li>
            <li>
                <img src="../demo/imgs/教师10.png" alt="">
                <div>
                    <p>陈老师 <span>★★★★★</span></p>
                    拥有丰富的工作经验，曾在某大型教育机构任前端开发一职，管理并维护公司的项目。擅长JavaScript、nodeJS、Vue等一些前端框架，有良好的逻辑思维能力，
                </div>
            </li>

    </div>

    <!-- 尾部 -->
    <div class="footer">
        <div class="footer-content">
            <p>联系我们</p>
            <p>想要成功，就要比别人先行动，快来报名吧！</p>
            <div class="footer-inp">
                <input type="text" placeholder="请输入你的姓名">
                <button>联系老师</button>
            </div>
            <div class="footer-nav">
                <div class="f-n-one">
                    <ul class="ul-seven">
                        <li class="li-one">友情链接</li>
                        <li><a href="">蓝狐教育</a></li>
                        <li>中国航天</li>
                        <li>慕课网</li>
                        <li>万维网</li>
                        <li>院政府网</li>
                        <li>微信小程序</li>
                        <li>设计导航</li>
                    </ul>
                </div>
                <div class="f-n-two">
                    <ul class="ul-nane">
                        <li class="li-two">网站地图</li>
                        <li><a href="">首页</a></li>
                        <li><a href="">精品课程</a></li>
                        <li><a href="">就业服务</a></li>
                        <li><a href="">教学服务</a></li>
                        <li><a href="">新闻动态</a></li>
                        <li><a href="">关于蓝狐</a></li>


                    </ul>
                </div>
                <div class="f-n-three">
                    <ul class="ul-ten">
                        <li class="li-three">关注我们</li>
                        <li class="li-four">
                            <img src="../demo/imgs/电话.png" alt="">
                            <span>咨询热线：</span>
                            <i>0371-56621110</i>
                        </li>
                        <li class="li-five">
                            <img src="../demo/imgs/定位.png" alt="">
                            <span> 公司地址：</span>
                            <i>河南省郑州市惠济区天河路128号</i>
                        </li>
                        <li class="li-six">
                            <span><img src="../demo/imgs/二维码1.png" alt="">&nbsp;&nbsp;&nbsp;李老师</span>
                            <span><img src="../demo/imgs/二维码2.png" alt="">&nbsp;&nbsp;&nbsp;段老师</span>
                        </li>
                    </ul>
                </div>
                <div class="f-n-four">
                    <ul class="ul-eleven">
                        <li class="li-seven">联系我们</li>
                        <li class="li-nane">
                            <img src="../demo/imgs/二维码3.png" alt="">
                        </li>

                    </ul>
                </div>
            </div>
            <p class="footer-p">Copyright@2022版权所有 河南蓝狐科技有限公司 ICP备案：豫ICP备2022001701号</p>
        </div>

    </div>
</div>

<body>

</body>

</html>